<h1>{{ _('Metric thresholds') }}</h1>

<div class='row'>
    <div class='col-md-4'>
        <a href="#" data-toggle="modal" data-target="#threshold_modal" ng-click="openNewThresholdModal()">
            <button id="threshold_button" type="submit" class="btn btn-primary">{{ _('Add threshold') }}</button>
        </a>
    </div>
</div>

<div class='row row-bordered'>
    <div class='col-md-1'>
    </div>
    <div class='col-md-3'>
      <strong>{{ _('Name') }}</strong>
    </div>
    <div class='col-md-2'>
      <strong>{{ _('Higher is better') }}</strong>
    </div>
    <div class='col-md-2'>
      <strong>{{ _('Value') }}</strong>
    </div>
    <div class='col-md-2'>
      <strong>{{ _('Environment') }}</strong>
    </div>
    <div class='col-md-2'>
      <strong>{{ _('Action') }}</strong>
    </div>
</div>
<div class='row row-bordered' ng-repeat="threshold in thresholds">
    <div class='col-md-1'>
        <i class='fa fa-line-chart'></i>
    </div>
    {% raw %}
    <div class='col-md-3'>
        {{ threshold.name }}
    </div>
    <div class='col-md-2'>
        <input type="checkbox" ng-if="!threshold.is_higher_better" disabled="disabled" />
        <input type="checkbox" ng-if="threshold.is_higher_better" disabled="disabled" checked="checked" />
    </div>
    <div class='col-md-2'>
        {{ threshold.value }}
    </div>
    <div class='col-md-2'>
        {{ threshold.environment }}
    </div>
    {% endraw %}
    <div class='col-md-2'>
        <a href="#" data-toggle="modal" data-target="#threshold_modal" ng-click="setThreshold(threshold)" style="color: inherit; text-decoration: none;">
            <i class='fa fa-pencil'></i>
        </a>
        <a ng-click="removeThreshold(threshold)" style="color: inherit; text-decoration: none;">
            <i class='fa fa-trash'></i>
        </a>
    </div>
</div>

<!-- Modal HTML -->
<div id="threshold_modal" class="modal fade">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="modalClosed()">&times;</button>
        <h4 class="modal-title">{{ _('Metric threshold') }}</h4>
      </div>

      <form class="well" id="threshold_form" ng-submit="updateMetricThreshold()">
        <div class="modal-body">
          {% raw %}
          <p ng-repeat="(name, errs) in errors" class="alert alert-danger errors"><strong>{{ name }}</strong>: {{ errs.join(', ') }}</p>
          {% endraw %}

          <div class="row form-group">
            <label for="name" class="col-md-3 control-label">{{ _('Environment:') }}</label><br>
            <div class="col-md-12">
	      <p class='small'>{{ _('Selecting "all" applies this threshold to newly created environments as well') }}</p>
              <select id="environment_name" name="environment" ng-model="currentThreshold.environment" style="width: 100%;">
	        <option value="all">{{ _('all') }}</option>
              {% for name in environments.values() %}
                <option value="{{ name }}">{{ name }}</option>
              {% endfor %}
              </select>
            </div>
          </div>
          <div class="row form-group">
            <label for="name" class="col-md-4 control-label">{{ _('Metric name pattern:') }}</label>
            <div class="col-md-12">
	      <p class='small'>{{ _('Example: "suite/*-metric" matches "suite/good-metric" but it does not match "suite/metric"') }}</p>
              <input id="value" name="value" ng-model="currentThreshold.name" style="width: 100%;" />
	    </div>
          </div>
          <div class="row form-group">
            <label for="value" class="col-md-3 control-label">{{ _('Value:') }}</label>
            <div class="col-md-12">
	      <p class='small'>{{ _('Leave it empty to make SQUAD compare the metric against a previous one;') }}</p>
              <input id="value" name="value" ng-model="currentThreshold.value" style="width: 100%;" />
            </div>
          </div>
          <div class="row form-group">
            <label for="is_higher_better" class="col-md-3 control-label">{{ _('Higher is better:') }}</label>
            <div class="col-md-2">
              <input id="is_higher_better" type="checkbox" name="is_higher_better" ng-model="currentThreshold.is_higher_better" />
            </div>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="modalClosed()">{{ _('Close') }}</button>
        <button class="btn btn-primary">{{ _('Save') }}</button>
      </div>
      </form>
    </div>
  </div>
</div>
